<template>
    <el-card class="infoContainer" shadow="always" :body-style="{ padding: '20px'}">
        <!-- 我的资料头部 -->
        <div class="header">
            <img class="headerImg" :src="newUserInfo?.avatar">
            <div class="replaceImg">点击更换</div>
        </div>
        <!-- 我的资料信息 -->
        <div class="middleInfo">
            <!-- 左侧 -->
            <ul class="leftInfo">
                <li>
                    <span> 用户名 : </span>
                    <el-input class="infoInput" value="Redamancy"/>
                </li>
                <li>
                    <span>性别:</span>
                    <el-button  size="default" >男</el-button>
                    <el-button  size="default" >女</el-button>
                </li>
                <li class="level">
                    <span>成长等级 :</span>
                    <div class="lv">Lv.{{ newUserInfo?.level }}</div>
                </li>
            </ul>
            <!-- 右侧 -->
            <ul class="leftInfo infoRightStyle">
                <li>
                    <span> 生日 :</span>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker type="date" placeholder="选择日期" size="default"
                                props="{expandTrigger:hover}" />
                        </div>
                    </div>
                </li>
                <li>
                    <span>城市:</span>
                    <div class="example-block">
                        <el-cascader />
                    </div>
                </li>
                <li>
                    <span>技能水平 :</span>
                    <el-select  placeholder="请选择">
                        <el-option class="skillSelect" value="1">
                            <span class="skillOne"></span>
                            <span class="skillTwo"></span>
                        </el-option>
                    </el-select>
                </li>
            </ul>
            <!-- 点击图标显示的dialog -->
            <el-dialog title="技能水平" width="25%" align-center>
                <span>平台将根据你选择的技能水平，优先智能推荐相应内容。</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary">确定</el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 兴趣技能-->
            <div class="leftInfo hobbySkill">
                <span> 兴趣技能 :</span>
                <span class="skillTag" >
                </span>
                <el-button class="selectButton" size="default" >请选择</el-button>
            </div>
            <!-- 保存按钮 -->
            <div class="infoSave">
                <el-button class="save" type="primary" size="default">保存</el-button>
            </div>
        </div>
    </el-card>

</template>

<script setup lang="ts">
import centerApi,{type UserInfo} from "@/api/center";
import { onMounted, reactive, ref } from 'vue';
const newUserInfo = ref<UserInfo>()
const useInfo =  async() => {
    try {
        let resoult = await centerApi.getInfo()
        newUserInfo.value = resoult.data
    } catch (error) {
    }
}
onMounted(() => {
    useInfo()
}) 


</script>

<style lang="less" scoped>
.infoContainer {
    min-height: 630px;
    padding-top: 60px;
}

/* 头部 */
.header {
    height: 140px;

}

.headerImg {
    height: 120px;
    width: 120px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.headerImg:hover {
    border: 2px solid #f8bed5;
    box-shadow:5px 5px 10px 5px black outset; 
}

.replaceImg {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    color: #7D8090;
    font-size: 14px;
}

/* 中间部分 */
.middleInfo {
    width: 100%;
    margin: 20px 140px;
    position: relative;
    padding: 20px 0;
}

.leftInfo {
    /* float: left; */
    margin-left: 40px;
    margin-right: 60px;

}

.middleInfo ul li {
    width: 340px;
    height: 58px;
}

/* 左侧部分 */
.leftInfo li span {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
}

.leftInfo li .infoInput {
    height: 40px;
    width: 160px;
    background-color: #f5f7f9;
    border-style: none;
    border: none;
}

.leftInfo li button {
    width: 70px;
    height: 30px;
    background-color: #f5f7f9;
    border-style: none;
    color: #000;
    margin-right: 10px;

}

.leftInfo li button.active {
    background-color: #f93684;
    color: #fff
}

/* level的样式 */
.level {
    position: relative;
}

.lv {
    height: 20px;
    width: 41px;
    background-color: #ff43d0;
    margin: 0 auto;
    border-radius: 4px;
    text-align: center;
    margin-top: 5px;
    font-style: oblique;
    font-weight: 600;
    font-size: 12px;
    color: white;
    line-height: 20px;
    position: absolute;
    top: 5px;
    left: 85px;

}

/* 右侧部分 */
.infoRightStyle {
    position: absolute;
    left: 330px;
    top: 20px;
}

/* 时间选择器 */
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    position: absolute;
    top: -25px;
    left: 22px;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

/* 技能水平选择器的样式 */
.skillOne {
    font-size: 14px;
}

.skillTwo {
    display: inline-block;
    /* float: right; */
    margin-left: 10px;
    font-size: 12px;

}

/* 技能水平后面的图标 */
.infoIcon {
    margin: 3px 10px;
}

/* 兴趣技能 */
.leftInfo.hobbySkill {
    width: 800px;
}

/* tag标签的样式 */
.leftInfo.hobbySkill span {
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
}

.leftInfo.hobbySkill .skillTag {
    position: relative;
    width: 100px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    /* margin: 0 10px; */
    margin-left: 22px;
}

.skillTag svg {
    position: absolute;
    top: -20px;
    right: -4px;
}

/* 兴趣技能的请选择按钮 */
.hobbySkill .selectButton {
    height: 35px;
    width: 80px;
    font-size: 14px;
    color: #bbbfc9;
    border-radius: 5px;
    border: none;
    margin: 0 10px;
    background-color: #f5f7f9;
}

/* 保存按钮 */
.save {
    background-color: #f93684;
    margin: 30px 270px 0;
    width: 140px;
    height: 46px;
    border: none;
    font-size: 12px;
    color: #fff;
}

.example-block {
    margin: -40px 81px;
    width: 220px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.dialog-footer button {
    background-color: #f93684;
    border: none;
}
</style>